<template>
    <view class="boxList">
        <u-row gutter="26">
            <u-col span="6" v-for="(boxList, index) in boxList" :key="index">
                <view @click="click(boxList.box_id)" class="box-item">
                    <view class="box-bg">
                        <u-image width="280rpx" height="280rpx" :src="boxList.box_banner_images[0]"
                                 class="box-img"></u-image>
                        <text class="box-name">{{ boxList.box_name }}</text>
                        <view class="box-price">
                            {{ boxList.coin_price }}
                            <i class="custom-icon custom-icon-objects-color_diamond"
                               style="padding-left: 10rpx;color: #65a5c7"></i>
                        </view>
                    </view>
                </view>
            </u-col>
        </u-row>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import CustomTabbar from "@/components/tabbar/tabbar.vue";

export default {
    name: "boxList",
    components: {
        CustomTabbar
    },
    props: {
        boxList: {
            type: Array,
            default: () => [],
            required: true
        },
        free: {
            type: Boolean,
            default: false,
        }
    },

    data() {
        return {}
    },
    onLoad() {
    },
    methods: {
        click(box_id) {
            if (this.free) {
                this.$u.route({
                    url: 'pages/box/boxDetail/boxDetail',
                    type: 'navigateTo',
                    params: {
                        box_id: box_id,
                        free: true
                    }
                })
            } else {
                this.$u.route({
                    url: 'pages/box/boxDetail/boxDetail',
                    type: 'navigateTo',
                    params: {
                        box_id: box_id,
                        free: false
                    }
                })
            }
        }
    }
}

</script>
<style scoped lang="scss">
.boxList {
    margin-top: 20rpx;
}

.box-item {
    //background-image: url("@/static/images/openBox-bg.png");
    //background-size: 100% 100%;
    background-image: linear-gradient(57deg, #274a78, #1c305c 100%);
    border-radius: 35rpx;
    overflow: hidden;
    font-size: 26rpx;
    position: relative;


    .box-bg {
        display: flex;
        flex-direction: column;
        margin-bottom: 20rpx;
        margin-top: 40rpx;
        //background-image: url("@/static/images/boxList.gif");
        //background: url('@/static/images/boxList.gif') no-repeat bottom center;
        //background-size: cover;


        .box-img {
            margin: 20rpx auto;
        }

        .box-name {
            position: absolute;
            top: 10rpx;
            left: 20rpx;
            margin-top: 10rpx;
        }
        .box-price{
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

}

</style>